<script setup>
import { ref } from 'vue'
import { getProList, delFn, editFn, addFn } from './api/homeapi'

const proList = ref([])
const page = ref(1)
getProList({
  page: page.value
}).then(res => {
  proList.value = res
})


function pageClick (code) {
  page.value = code == '-' ? page.value - 1 : page.value + 1
  // page.value++


  getProList({
    page: page.value
  }).then(res => {
    proList.value = res
  })
}
// 页面切换的事件
function changePage (count) {
  // console.log(count);
  page.value = count
  getProList({
    page: page.value
  }).then(res => {
    proList.value = res
  })
}

// 删除按钮的点击事件
function delClick (proid) {
  // console.log('删除被点击了', proid);
  delFn({
    proid
  }).then(res => {
    // console.log(res);
    if (res.code == 200) {
      getProList({
        page: page.value
      }).then(res => {
        proList.value = res
      })
    }
  })
}

// 修改的点击事件
function editClick (pro) {
  pro.proname += '666'
  editFn(pro).then(res => {
    // console.log(res);
    if (res.code == 200) {
      getProList({
        page: page.value
      }).then(res => {
        proList.value = res
      })
    }
  })
}

// 添加按钮的点击事件
function addClick () {
  addFn({
    'goodsKind': '女装',
    proid: "pro-xfhcgdfnhfgxfhyf",
    proname: '一套特别好看的裙子',
    'proStart': '❤❤❤❤❤',
    proimage: '@image("200x200", "@color")',
    createTime: '@datetime()',
    name: '@cname()'
  }).then(res => {
    if (res.code == 200) {
      getProList({
        page: page.value
      }).then(res => {
        proList.value = res
      })
    }
  })
}
</script>

<template>
  <div>
    <el-button type="primary" @click="addClick">添加</el-button>

    <el-table :data="proList.proList" style="width: 100%">
      <el-table-column prop="createTime" label="添加时间" />
      <el-table-column prop="proname" label="商品名称" />
      <el-table-column prop="goodsKind" label="分类" />
      <el-table-column prop="proStart" label="星级" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="editClick(scope.row)">修改</el-button>
          <el-button type="success" @click="delClick(scope.row.proid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background v-model:current-page="page" :default-page-size="5" layout="prev, pager, next"
      @current-change="changePage" :total="proList.count" />

    <el-button type="primary" @click="pageClick('-')">上一页</el-button>
    <el-button type="primary" @click="pageClick('+')">下一页</el-button>

  </div>
</template>
